$width: 150px;
$height: 150px;
$color: #2890fa;
@keyframes turn3d {
  0% {
    transform: rotateY(0) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.box-perspective {
  position: absolute;
  perspective: 800px;
  perspective-origin: 50% 50%;
  width: $width;
  height: $width;
  .box-preserve-3d {
    position: absolute;
    transform-style: preserve-3d;
    animation: turn3d 10s infinite linear;
    width: $width;
    height: $width;
    .ball-center-x {
      transform: rotateY(-90deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-x-one {
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-x-two {
      transform: rotateY(30deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-x-three {
      transform: rotateY(60deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-x-four {
      transform: rotateY(120deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-x-five {
      transform: rotateY(150deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y {
      transform: rotateX(90deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y-one {
      transform: rotateX(0deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y-two {
      transform: rotateX(30deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y-three {
      transform: rotateX(60deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y-four {
      transform: rotateX(120deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    .ball-center-y-five {
      transform: rotateX(150deg);
      transform-origin: 50% 50%;
      border: 1px solid $color;
      border-radius: calc($width / 2);
      width: $width;
      height: $width;
    }
    div {
      position: absolute;
      box-shadow:
        0 0 5px #2890fa inset,
        0 0 10px #2890fa;
    }
  }
}
